<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
    <!-- <ParentDemo /> -->
    <FetchComponent />
    <test-form-component />
    <router-view />
    <RectangleTest />
    <template v-if="false">
      <TesseractDemo />
      <TurnjsComponent />
      <lodash-component />
      <EasyTyperDemo />
      <copy-demo />
      <driver-demo />
      <attrs-a />
      <button @click="count++">Click me</button>
      {{ count }}
      <halo-word />
      <ParentComponent />
      <DemoComponent />
      <directive-component />
      <ref-component />
      <ParentComponent />
      <computed-component />
      <event-bus />
      <computed-set-component />
      <watch-component />
      <watch-object-component />
    </template>
  </div>
</template>

<script>
import HaloWord from "./components/HaloWord.vue";
import DemoComponent from "./components/DemoComponent.vue";
import ParentComponent from "./components/ParentComponent.vue";
import DirectiveComponent from "./components/DirectiveComponent.vue";
import RefComponent from "./components/RefComponent.vue";
import EventBus from "./components/EventBus.vue";
import ComputedComponent from "./components/ComputedComponent.vue";
import ComputedSetComponent from "./components/ComputedSetComponent.vue";
import WatchComponent from "./components/WatchComponent.vue";
import WatchObjectComponent from "./components/WatchObjectComponent.vue";
import AttrsA from "./components/AttrsA.vue";
import DriverDemo from "./components/DriverDemo.vue";
import CopyDemo from "./components/CopyDemo.vue";
import LodashComponent from "./components/LodashComponent.vue";
import EasyTyperDemo from "@/components/EasyTyperDemo.vue";
import TurnjsComponent from "@/components/TurnjsComponent.vue";
import TesseractDemo from "@/components/tesseract/TesseractDemo.vue";
import RectangleTest from "@/components/rectangle/RectangleTest.vue";
import ParentDemo from "@/components/rectangle/ParentDemo.vue";
import TestFormComponent from "./components/TestFormComponent.vue";
import FetchComponent from "./components/FetchComponent.vue";

export default {
  name: "App",
  components: {
    HaloWord,
    DemoComponent,
    ParentComponent,
    DirectiveComponent,
    RefComponent,
    EventBus,
    ComputedComponent,
    ComputedSetComponent,
    WatchComponent,
    WatchObjectComponent,
    AttrsA,
    DriverDemo,
    CopyDemo,
    LodashComponent,
    EasyTyperDemo,
    TurnjsComponent,
    TesseractDemo,
    RectangleTest,
    ParentDemo,
    TestFormComponent,
    FetchComponent,
  },
  data() {
    return {
      count: 0,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
